<!DOCTYPE html>
<!-- <html dir="rtl" lang="en"> -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>
  <style>
    .flex-box {
      width: 300px;
      background-color: rgb(220, 210, 197);
    }
    .flex-box > div:first-child {
      /* flex: 1; */
      width: 100px;
      background-color: rgb(240, 238, 235);
    }
    .flex-box > div:last-child {
      /* flex: 2; */
      width: 200px;
      background-color: rgba(75, 72, 68, 0.353);
    }
    .flex-box > div {
      border: 1px solid red;
      padding: 1px;
      height: 20px;
      /* box-sizing: content-box; */
      box-sizing: border-box;
    }
  </style>
  <body>
    <div id="app-2">
      <span>{{$t('common.hello')}}</span>
      <span v-bind:title="message"> don't care </span>
      <span> {{message | myFilter}}</span>
      <div
        class="flex-box"
        :style="{
        display:'flex'
      }"
      >
        <div></div>
        <div></div>
      </div>
    </div>
  </body>
  <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-i18n@8"></script>
  <script>
    // 准备翻译的语言环境信息
    const common = {
      en: {
        message: {
          hello: "hello world",
        },
      },
      zh: {
        message: {
          hello: "你好，世界",
        },
      },
    };
    // 通过选项创建 VueI18n 实例
    const i18n = new VueI18n({
      locale: "zh", // 设置地区
      common, // 设置地区信息
    });
    var app2 = new Vue({
      i18n,
      el: "#app-2",
      data: {
        message: "d " + new Date().toLocaleString(),
      },
      computed: {
        a: {
          get: function () {
            return this.message + "computed";
          },
        },
      },
      filters: {
        myFilter: function (value) {
          if (value) return "yes";
          else return "no";
        },
      },
      mounted() {
        setTimeout(() => {
          console.log(this.a);
          console.log(this.a);
          this.message = "aaa";
          console.log(this.a);
        }, 1000);
      },
    });
    console.log(Vue.filter);
  </script>
</html>
